<template>
  <a-modal
    :title="formTile + '关键字'"
    :visible="true"
    width="70%"
    :footer="null"
    @cancel="reset"
  >
    <div class="main">
      <a-card style="background:#e8e8e8">
        <a-row
          type="flex"
          justify="start"
          align="top"
        >
          <a-col :span="24">
            <a-form
              :form="form"
              @submit="handleSubmit"
              :labelCol="formItemLayout.labelCol"
              :wrapperCol="formItemLayout.wrapperCol"
            >
              <div style="background: #fff;height: 300px;padding-top: 30px;">
                <a-form-item
                  label="触发关键字"
                  :required="true"
                >
                  <a-input
                    allow-clear
                    placeholder="请输入关键字"
                    v-decorator="[
                  `keyword`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入关键字！'
                      }
                    ]
                  }
                ]"
                  />
                </a-form-item>

                <a-form-item
                  label="匹配方式"
                  allow-clear
                >
                  <a-radio-group
                    name="matchType"
                    v-decorator="['matchType', { initialValue: 1, rules: [{ required: true, message: '请选择匹配方式!' }] }]"
                  >
                    <a-radio :value="1"> 精准匹配 </a-radio>
                    <a-radio :value="2"> 模糊/包含匹配 </a-radio>

                  </a-radio-group>
                </a-form-item>
                <a-form-item
                  label="回复时效"
                  :required="true"
                >
                  <a-radio-group
                    name="matchType"
                    v-model="businessId"
                  >
                    <a-radio :value="1"> 永久有效 </a-radio>
                    <a-radio :value="2"> 时间周期 </a-radio>

                  </a-radio-group>

                  <a-range-picker
                    show-time
                    v-if="businessId == 2"
                    style="width:80%"
                    @change="onChange"
                    format="YYYY-MM-DD HH:mm:ss"
                    v-decorator="[
                  'time',
                  {
                    initialValue: times,
                    rules: [{ required: true, message: '请选择回复时效!' }]
                  }
                ]"
                  />
                </a-form-item>
                <a-form-item
                  label="回复人群"
                  :required="true"
                >
                  <a-select
                    allow-clear
                    show-search
                    placeholder="请选择回复人群"
                    optionFilterProp="children"
                    v-decorator="[
                  'tagGroup',
                  {
                    rules: [{ required: true, message: '请选择回复人群!' }]
                  }
                ]"
                  >
                   <a-select-option :value="0">
                      全部人员
                    </a-select-option>
                    <a-select-option
                      :value="item.id"
                      v-for="(item,index)  in personList"
                      :key="index"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                </a-form-item>
              </div>
              <div style="background: #fff; padding: 30px 0px 70px ;margin-top: 20px;">
                <a-form-item
                  label="回复内容"
                  :required="true"
                >
                  <div>
                    <a-menu
                      class="menu"
                      v-model="current"
                      mode="horizontal"
                      @click="handleClick"
                    >
                      <a-menu-item
                        style="width:12.4%;text-align:center"
                        v-for="item in topMenu"
                        :key="item.id"
                        :value="item.title"
                      >{{item.title}} </a-menu-item>
                    </a-menu>
                    <div class="text">
                      <a-form-item
                        class="content"
                        v-if="menuType == 1"
                      >
                        <a-textarea
                          allow-clear
                          :rows="6"
                          style="    width: 600px;"
                          placeholder="示例：您好，感谢关注"
                          v-decorator="['textMsgContent', { rules: [{ required: true, message: '请输入文本消息！' }] }]"
                        ></a-textarea>
                      </a-form-item>
                      <div
                        style="display:flex;justify-content:space-between"
                        v-if="menuType == 2"
                      >
                        <div
                          style="width:40%"
                          v-if="!photoList.length"
                        >
                          <div class="box">
                            <a-list :data-source="photoList">
                              <a-list-item
                                slot="renderItem"
                                slot-scope="item, index"
                                style="padding:0;justify-content: center;"
                              >
                                {{item.label}}
                              </a-list-item>
                            </a-list>
                          </div>
                        </div>
                        <div
                          style="width:40%"
                          v-else
                        >
                          <div class="box">
                            <div
                              v-for="(item,index) in photoList"
                              :key="index"
                            >
                              <div style="padding:0; justify-content: center;">
                                <div>
                                  <div style="width:100%">
                                    <img
                                      class="photo"
                                      style="border-radius: 10px 10px 0 0;"
                                      :src="pictureUrl"
                                    >
                                  </div>
                                  <div style="  height: 90px;padding: 0 20px;">
                                    <div class="oneItem">
                                      <span style="  font-size: 18px;line-height: 50px;">
                                        {{item.title}}
                                      </span>

                                    </div>
                                    <span style="font-size: 16px;color: #9e9e9e;line-height: 10px;">
                                      {{item.description}}
                                    </span>
                                  </div>

                                </div>
                              </div>
                            </div>
                          </div>
                        </div>
                        <div style="width:59%">
                          <a-form
                            :form="formList"
                            :labelCol="formItemLayout.labelCol"
                            :wrapperCol="formItemLayout.wrapperCol"
                          >
                            <div
                              v-for="(item, index) in fileds"
                              :key="index"
                              class="list"
                            >
                              <a-form-item
                                label="标题"
                                class="formItem"
                              >
                                <a-input
                                  style="width: 300px"
                                  placeholder="请输入标题"
                                  v-decorator="[`names[${index}][title]`, {initialValue: item['title'],validateTrigger: ['change', 'blur'],
                                           rules: [{required: true,whitespace: true,message: '请输入标题'}]}]"
                                ></a-input>
                              </a-form-item>
                              <a-form-item
                                label="备注"
                                class="formItem"
                              >
                                <a-input
                                  style="width: 300px"
                                  placeholder="请输入备注"
                                  v-decorator="[`names[${index}][description]`,{initialValue: item['description'],validateTrigger: ['change', 'blur'],
                                            rules: [{required: true,whitespace: true,message: '请输入备注'}]}]"
                                ></a-input>
                              </a-form-item>
                              <a-form-item
                                class="formItem"
                                label="封面URL"
                              >
                                <a-input
                                  style="width: 300px"
                                  placeholder="请输入封面URL(http://或https://)"
                                  v-decorator="[ `names[${index}][url]`, {initialValue: item['url'],validateTrigger: ['change', 'blur'],
                                           rules: [{ required: true, message: '请输入正确格式的URL链接！', whitespace: true, pattern: /http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/is }]}]"
                                ></a-input>
                              </a-form-item>
                              <a-form-item
                                class="formItem"
                                label="选择素材"
                              >
                                <div
                                  class="onePicture"
                                  v-if="pictureUrl"
                                  style="width: 120px;"
                                >
                                  <img
                                    style="object-fit: scale-down;width:100px;"
                                    :src="pictureUrl"
                                  >
                                  <a-icon
                                    @click="delectPicture"
                                    theme="twoTone"
                                    two-tone-color="red"
                                    type="close-circle"
                                    style="font-size: 24px;margin-top: 10px;"
                                  />
                                </div>
                                <a-button
                                  v-if="!pictureUrl"
                                  style="margin-left:20px"
                                  @click="showPhotoList"
                                >点击选择图片</a-button>

                                <!-- <a-select
                              allow-clear
                              size="large"
                              placeholder="请选择素材"
                              v-decorator="[`names[${index}][picUrl]`,{initialValue: item['picUrl'],rules: [{ required: true, message: '请选择素材' }]}]"
                            >
                              <a-select-option
                                :value="item.url"
                                v-for="(item,index)  in backPhotoList"
                                :key="index"
                              >
                                <span
                                  role="img"
                                  aria-label="China"
                                >
                                  <img
                                    style="width:30px"
                                    :src="item.url"
                                    onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                                  >
                                </span>
                                {{ item.originalFileName }}
                              </a-select-option>
                            </a-select> -->
                              </a-form-item>
                            </div>
                          </a-form>
                        </div>
                      </div>
                      <div
                        style="display:flex;justify-content:space-between"
                        v-if="menuType == 3"
                      >
                        <div style="width:40%">
                          <div class="box">
                            <a-list
                              item-layout="horizontal"
                              :data-source="photoList"
                            >
                              <a-list-item
                                slot="renderItem"
                                slot-scope="item, index"
                                style="padding:0;justify-content: center;"
                              >
                                <div
                                  v-if="index==0"
                                  style="width: 100%;"
                                >
                                  <div
                                    class="firstPhoto"
                                    :style="{backgroundImage:`url(${item.picUrl})`}"
                                  >
                                    <span class="firstText">{{item.title}}</span>
                                  </div>
                                </div>
                                <div
                                  v-else
                                  class="nextBox"
                                >
                                  <div style="width:80%">
                                    {{item.title}}
                                  </div>
                                  <div style="width:20%">
                                    <img
                                      class="photo"
                                      style="height:60px"
                                      :src="item.picUrl"
                                    >
                                  </div>
                                </div>
                              </a-list-item>
                            </a-list>
                          </div>
                        </div>
                        <div style="width:59%">
                          <a-form
                            :form="formList"
                            :labelCol="formItemLayout.labelCol"
                            :wrapperCol="formItemLayout.wrapperCol"
                          >
                            <div
                              v-for="(item, index) in fileds"
                              :key="index"
                              class="list"
                            >
                              <div class="indexTip">第{{index+1}}条图文</div>
                              <a-form-item
                                label="标题"
                                class="formItem"
                              >
                                <a-input
                                  placeholder="请选择标题"
                                  style="width: 300px"
                                  v-decorator="[`names[${index}][title]`, {initialValue: item['title'],validateTrigger: ['change', 'blur'],
                                           rules: [{required: true,whitespace: true,message: '请输入标题'}]}]"
                                ></a-input>
                              </a-form-item>
                              <a-form-item
                                label="备注"
                                class="formItem"
                              >
                                <a-input
                                  style="width: 300px"
                                  placeholder="请选择备注"
                                  v-decorator="[`names[${index}][description]`,{initialValue: item['description'],validateTrigger: ['change', 'blur'],
                                            rules: [{required: true,whitespace: true,message: '请输入备注'}]}]"
                                ></a-input>
                              </a-form-item>
                              <a-form-item
                                class="formItem"
                                label="封面URL"
                              >
                                <a-input
                                  style="width: 300px"
                                  placeholder="请输入封面URL(http://或https://)"
                                  v-decorator="[ `names[${index}][url]`, {initialValue: item['url'],validateTrigger: ['change', 'blur'],
                                           rules: [{ required: true, message: '请输入正确格式的URL链接！', whitespace: true, pattern: /http(s)?:\/\/[\w.]+[\w\/]*[\w.]*\??[\w=&\+\%]*/is }]}]"
                                ></a-input>
                              </a-form-item>
                              <a-form-item
                                class="formItem"
                                label="选择素材"
                              >
                                <a-select
                                  allow-clear
                                  size="large"
                                  style="width: 300px"
                                  placeholder="请选择素材"
                                  v-decorator="[`names[${index}][picUrl]`,{initialValue: item['picUrl'],rules: [{ required: true, message: '请选择素材' }]}]"
                                >
                                  <a-select-option
                                    :value="item.url"
                                    v-for="(item,index)  in backPhotoList"
                                    :key="index"
                                  >
                                    <span
                                      role="img"
                                      aria-label="China"
                                    >
                                      <img
                                        style="width:30px"
                                        :src="item.url"
                                        onerror="this.src='https://img.bzhz.jnbygroup.com/cloth.png'"
                                      >
                                    </span>
                                    {{ item.originalFileName }}
                                  </a-select-option>
                                </a-select>
                              </a-form-item>
                            </div>
                          </a-form>
                        </div>
                      </div>
                      <div class="buttonDiv">
                        <a-button
                          type="link"
                          @click="show"
                          class="button"
                          v-if="menuType == 2 || menuType == 3"
                        >
                          预览
                        </a-button>
                        <a-button
                          type="link"
                          v-if="menuType == 3"
                          class="button"
                          style="margin-left:10px"
                          @click="addList"
                        >
                          <a-icon type="plus" /> 新增图文
                        </a-button>

                      </div>
                      <div v-if="menuType == 4">
                        <div style="display:flex;justify-content: center;padding: 20px;align-items:center;">
                          <div
                            class="onePicture"
                            v-if="pictureUrl"
                          >
                            <img
                              style="object-fit: scale-down;width:300px;"
                              :src="pictureUrl"
                            >
                            <a-icon
                              @click="delectPicture"
                              theme="twoTone"
                              two-tone-color="red"
                              type="close-circle"
                              style="font-size: 24px;margin-top: 10px;"
                            />
                          </div>
                          <a-button
                            style="margin-left:20px"
                            @click="showPhotoList"
                          >点击选择图片</a-button>
                        </div>

                      </div>
                      <div
                        v-if="menuType == 5"
                        style="padding-bottom:10px"
                      >
                        <div style="display:flex;flex-direction: column;justify-content: center;padding: 20px;">
                          <div
                            class="onePicture"
                            style="background:#fff"
                            v-if="pictureUrl"
                          >
                            <iframe
                              :src='pictureUrl'
                              frameborder="0"
                              allowfullscreen
                              style="width: 700px;height: 80vh;"
                            ></iframe>
                            <a-icon
                              @click="delectPicture"
                              theme="twoTone"
                              two-tone-color="red"
                              type="close-circle"
                              style="font-size: 24px;margin-top: 10px;"
                            />
                          </div>
                          <a-button
                            style="margin:20px auto;width:250px;"
                            @click="showPhotoList"
                          >点击选择视频</a-button>
                        </div>
                        <a-form-item
                          label="标题"
                          :required="true"
                        >
                          <a-input
                            allow-clear
                            placeholder="请输入标题"
                            style="width:500px"
                            :maxLength="40"
                            v-decorator="[
                  `title`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入标题！'
                      }
                    ]
                  }
                ]"
                          />
                        </a-form-item>
                        <a-form-item
                          label="描述"
                          :required="true"
                        >
                          <a-input
                            style="width:500px"
                            allow-clear
                            placeholder="请输入描述"
                            v-decorator="[
                  `description`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入描述！'
                      }
                    ]
                  }
                ]"
                          />
                        </a-form-item>
                      </div>
                      <div style="padding-bottom:10px">
                        <div
                          v-if="menuType == 6 || menuType == 7"
                          style="display:flex;justify-content: center;padding: 20px;align-items:center"
                        >
                          <div
                            class="onePicture"
                            style="background:#fff"
                            v-if="mediaId"
                          >
                            <audio
                              :src="apiBaseUrl + '/api/gateway/basemgt-wx/WxMaterial/downloadVoiceFrequency?appid='+appid+'&mediaId='+mediaId"
                              autoplay="autoplay"
                              controls="controls"
                              ref="audio"
                            ></audio>
                            <a-icon
                              @click="delectPicture"
                              theme="twoTone"
                              two-tone-color="red"
                              type="close-circle"
                              style="font-size: 24px;margin-top: 10px;"
                            />
                          </div>
                          <a-button
                            style="margin-left:20px"
                            @click="showPhotoList"
                          >点击选择音频</a-button>
                        </div>
                        <div v-if="menuType == 6">
                          <a-form-item
                            label="标题"
                            :required="true"
                          >
                            <a-input
                              allow-clear
                              placeholder="请输入标题"
                              :maxLength="40"
                              style="width:500px"
                              v-decorator="[
                  `title`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入标题！'
                      }
                    ]
                  }
                ]"
                            />
                          </a-form-item>
                          <a-form-item
                            label="描述"
                            :required="true"
                          >
                            <a-input
                              allow-clear
                              style="width:500px"
                              placeholder="请输入描述"
                              v-decorator="[
                  `description`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入描述！'
                      }
                    ]
                  }
                ]"
                            />
                          </a-form-item>
                        </div>
                      </div>
                      <div
                        style="width:100%"
                        v-if="menuType == 8"
                      >
                        <a-form
                          :form="form"
                          :labelCol="formItemLayout.labelCol"
                          :wrapperCol="formItemLayout.wrapperCol"
                        >
                          <a-form-item
                            label="标题"
                            :required="true"
                          >
                            <a-input
                              allow-clear
                              style="width:500px"
                              placeholder="请输入标题"
                              :maxLength="40"
                              v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入标题！'
                      }
                    ]
                  }
                ]"
                            />
                          </a-form-item>
                          <a-form-item
                            label="appid"
                            :required="true"
                          >
                            <a-input
                              allow-clear
                              style="width:500px"
                              placeholder="请输入appid"
                              :maxLength="40"
                              v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入appid！'
                      }
                    ]
                  }
                ]"
                            />
                          </a-form-item>
                          <a-form-item
                            label="页面路径"
                            :required="true"
                          >
                            <a-input
                              allow-clear
                              style="width:500px"
                              placeholder="请输入页面路径"
                              v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入页面路径！'
                      }
                    ]
                  }
                ]"
                            />
                          </a-form-item>
                          <a-form-item
                            label="封面素材id"
                            :required="true"
                          >
                            <a-input
                              allow-clear
                              style="width:500px"
                              placeholder="请输入封面素材id"
                              :maxLength="40"
                              v-decorator="[
                  `templateName`,
                  {
                    validateTrigger: ['change', 'blur'],
                    rules: [
                      {
                        required: true,
                        whitespace: true,
                        message: '请输入封面素材id！'
                      }
                    ]
                  }
                ]"
                            />
                          </a-form-item>

                        </a-form>
                      </div>
                    </div>
                  </div>
                </a-form-item>

              </div>
              <a-row style="margin-top:10px">
                <a-col
                  :span="16"
                  :offset="18"
                  class="info-action"
                >
                  <a-button @click="clear">
                    重置
                  </a-button>
                  <a-button
                    :style="{ marginLeft: '8px' }"
                    type="primary"
                    html-type="submit"
                  >
                    保存
                  </a-button>
                </a-col>
              </a-row>
            </a-form>
          </a-col>
        </a-row>
      </a-card>
    </div>
    <list
      v-if="showList"
      :menuType="menuType"
      :appid="appid"
      @close="close"
    ></list>
  </a-modal>

</template> 

<script>
import { postAction, getAction } from '@/api/manage'
import moment from 'moment'
import 'moment/locale/zh-cn'
import list from './list.vue'

// const personList = [
//   {
//     id: 1,
//     title: '全部关注'
//   },
//   {
//     id: 2,
//     title: '新增会员'
//   },
//   {
//     id: 3,
//     title: '生日月会员'
//   }
// ]
const topMenu = [
  {
    id: 1,
    title: '文本消息'
  },
  {
    id: 2,
    title: '单图文'
  },
  {
    id: 3,
    title: '多图文'
  },
  {
    id: 4,
    title: '图片'
  },
  {
    id: 5,
    title: '视频'
  },
  {
    id: 6,
    title: '音频'
  },
  {
    id: 7,
    title: '语音'
  },
  {
    id: 8,
    title: '菜单'
  }
]
export default {
  props: {
    detail: {
      type: Object,
      default: null
    },
    appid: {
      type: String,
      default: null
    }
  },
  components: {
    list
  },
  data() {
    return {
      urlKey: 'basemgt-wx',
      personList: [],
      topMenu,
      businessId: 1,
      showList: false,
      current: [1],
      fileds: [],
      fileList: [],
      menuType: 1,
      type: '',
      id: '',
      detailId: '',
      names: [],
      imgURl: '',
      times: [],
      startTime: '',
      endTime: '',
      photoList: [],
      pictureUrl: '',
      mediaId: '',
      formItemLayout: {
        labelCol: {
          xl: { span: 5 },
          xs: { span: 5 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xl: { span: 16 },
          xs: { span: 12 },
          sm: { span: 12 }
        }
      },
      loading: true,
      ifEdit: false,
      apiBaseUrl:'',
      backPhotoList: [],
      pageNum: 1,
      pageSize: 20,
      form: this.$form.createForm(this),
      formList: this.$form.createForm(this)
    }
  },
  created() {
    this.apiBaseUrl = window._CONFIG['domianURL'] || "/jeecg-boot";
    const { detail } = this.$props
    if (detail) {
      this.formTile = '编辑'
      this.current = []
      this.menuType = detail.type

      if (detail.startTime) {
        this.times.push(moment(detail.startTime))
        this.times.push(moment(detail.endTime))
      }
      this.photoList = []
      this.ifEdit = true
      this.$nextTick(() => {
        this.id = detail.id
        this.businessId = detail.businessId
        this.current.push(detail.type)
        this.form.setFieldsValue({
          keyword: detail.keyword,
          matchType: detail.matchType,
          tagGroup: detail.tagGroup
        })
      })
    } else {
      this.formTile = '新增'
      this.add = true
      this.addList()
    }
  },
  mounted() {
    this.getPhotoList()
    this.getPersonList()
  },
  watch: {
    appid() {
      this.getMenuList()
    }
  },
  methods: {
    handleClick(e) {
      this.menuType = e.key
      this.photoList = []
      this.fileList = []
      this.fileds = []
      this.addList()
      this.pictureUrl = ''
      this.mediaId = ''
      this.formList.resetFields()
    },
    addList() {
      const obj = { title: '', url: '', picUrl: '', description: '' }
      let { fileds } = this
      fileds.push(obj)
      this.fileds = fileds
    },
    reset() {
      this.form.resetFields()
      this.fileds = []
      this.$emit('close')
    },
    showPhotoList() {
      this.showList = true
    },
    close(url, mediaId) {
      this.pictureUrl = url
      this.mediaId = mediaId
      this.showList = false
    },
    delectPicture() {
      this.pictureUrl = ''
      this.mediaId = ''
    },

    onChange(date, dateString) {
      this.startTime = dateString[0]
      this.endTime = dateString[1]
    },
    clear() {
      this.form.resetFields()
    },
    show(e) {
      e.preventDefault()
      this.formList.validateFields((err, values) => {
        if (!err) {
          this.photoList = values.names
          //   this.submit(values)
        }
      })
    },
    handleSubmit(e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          this.submit(values)
        }
      })
    },
    getPersonList() {
      const params = {
        appid: this.appid
      }
      postAction(`${this.urlKey}/WxTagList/findWxTagListList`, params).then(data => {
        if (data.code == 200) {
          this.personList = data.data
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    },
    getPhotoList() {
      if (this.menuType == 6) {
        this.type = 2
      } else if (this.menuType == 5) {
        this.type = 3
      } else {
        this.type = 1
      }
      const params = {
        appid: this.appid,
        pageSize: this.pageSize,
        pageNum: this.pageNum,
        type: this.type
      }
      postAction(`${this.urlKey}/WxMaterial/findWxMaterialListByCondition`, params).then(data => {
        if (data.code == 200) {
          this.backPhotoList = data.data.records
        } else {
          this.$message.warning(data.msg || data.message)
        }
        this.loading = false
        if (this.ifEdit) {
          this.getDetailList()
        }
      })
    },
    getDetailList() {
      const params = {
        id: this.id
      }
      getAction(`${this.urlKey}/WxKeyword/findWxKeywordDetailById`, params).then(data => {
        if (data.code == 200) {
          if (this.menuType == 1) {
            this.form.setFieldsValue({
              textMsgContent: data.data.result.textMsgDTO.textMsgContent
            })
          }
          if (this.menuType == 2) {
            this.photoList.push(data.data.result.singViewArticleDTO)
            this.fileds.push(data.data.result.singViewArticleDTO)
            this.pictureUrl = data.data.result.singViewArticleDTO.picUrl
          }
          if (this.menuType == 3) {
            this.photoList = data.data.result.manyViewArticleDTO.manyViewArticleList
            this.fileds = data.data.result.manyViewArticleDTO.manyViewArticleList
          }
          if (this.menuType == 4) {
            this.mediaId = data.data.result.imageMsgDTO.mediaId
            this.backPhotoList.map(item => {
              if (item.mediaId == this.mediaId) {
                this.pictureUrl = item.url
              }
            })
          }
          if (this.menuType == 5) {
            this.mediaId = data.data.result.videoMsgDTO.mediaId
            console.log(this.mediaId, this.backPhotoList)
            this.backPhotoList.map(item => {
              if (item.mediaId == this.mediaId) {
                this.pictureUrl = item.url
              }
            })
            this.form.setFieldsValue({
              title: data.data.result.videoMsgDTO.title,
              description: data.data.result.videoMsgDTO.description
            })
          }
          if (this.menuType == 6) {
            this.mediaId = data.data.result.musicMsgDTO.mediaId
            this.form.setFieldsValue({
              title: data.data.result.musicMsgDTO.title,
              description: data.data.result.musicMsgDTO.description
            })
          }
          if (this.menuType == 7) {
            this.mediaId = data.data.result.voiceMsgDTO.mediaId
          }
        } else {
          this.$message.warning(data.msg || data.message)
        }
        this.loading = false
      })
    },
    submit(values) {
      let itemList = []
      this.formList.validateFields((err, values) => {
        if (!err) {
          itemList = values.names
        }
      })
      const msgContentDTO = {}
      if (this.menuType == 1) {
        msgContentDTO.textMsgDTO = {
          textMsgContent: values.textMsgContent
        }
      }
      if (this.menuType == 2) {
        msgContentDTO.singViewArticleDTO = {
          title: itemList[0].title,
          description: itemList[0].description,
          // picUrl: itemList[0].picUrl,
          picUrl: this.pictureUrl,
          url: itemList[0].url
        }
      }
      if (this.menuType == 3) {
        msgContentDTO.manyViewArticleDTO = {
          manyViewArticleList: itemList
        }
      }
      if (this.menuType == 4) {
        msgContentDTO.imageMsgDTO = {
          mediaId: this.mediaId
        }
      }
      if (this.menuType == 5) {
        msgContentDTO.videoMsgDTO = {
          mediaId: this.mediaId,
          title: values.title,
          description: values.description
        }
      }
      if (this.menuType == 6) {
        msgContentDTO.musicMsgDTO = {
          mediaId: this.mediaId,
          title: values.title,
          description: values.description
        }
      }
      if (this.menuType == 7) {
        msgContentDTO.voiceMsgDTO = {
          mediaId: this.mediaId
        }
      }
      const params = {
        appid: this.appid,
        businessId: this.businessId,
        keyword: values.keyword,
        tagGroup: values.tagGroup,
        type: this.menuType,
        matchType: values.matchType,
        startTime: this.startTime,
        endTime: this.endTime,
        msgContentDTO: msgContentDTO
      }
      if (this.id) {
        params.id = this.id
      }
      console.log(params)
      const api = this.ifEdit ? `${this.urlKey}//WxKeyword/updateWxKeyword` : `${this.urlKey}/WxKeyword/insertWxKeyword`
      postAction(api, params).then(data => {
        if (data.code == 200) {
          this.$message.success(this.ifEdit ? '新建成功' : '修改成功')
          this.reset()
        } else {
          this.$message.warning(data.msg || data.message)
        }
      })
    }
  }
}
</script>

<style scoped>
.menu {
  /* position: relative;
  top: 35px;
  left: -90px; */
  background: #f5f5f5;
  display: flex;
  justify-content: space-between;
}
.ant-menu-horizontal {
  border: 1px solid #e8e8e8;
  border-bottom: none !important;
}
.ant-menu-horizontal > .ant-menu-item:hover,
.ant-menu-horizontal > .ant-menu-submenu:hover,
.ant-menu-horizontal > .ant-menu-item-active,
.ant-menu-horizontal > .ant-menu-submenu-active,
.ant-menu-horizontal > .ant-menu-item-open,
.ant-menu-horizontal > .ant-menu-submenu-open,
.ant-menu-horizontal > .ant-menu-item-selected,
.ant-menu-horizontal > .ant-menu-submenu-selected {
  color: #1890ff;
  background: #fff;
  border-bottom: none !important;
}
.text {
  width: 100%;
  border: 1px solid #c8c9cc;
  margin: auto;
  /* margin-top: 50px; */
}
.text .content {
  display: flex;
  width: 100%;
  justify-content: center;
  margin-top: 30px;
}
.list {
  background: #e8e8e8;
  padding: 10px;
  margin: 10px;
}
.formItem {
  margin-bottom: 10px;
}
.box {
  margin: 10px 0 0 10px;
  border-radius: 10px;
  box-shadow: 0 5px 15px -5px rgb(0 0 0 / 50%);
}
.photo {
  width: 100%;
  object-fit: scale-down;
}
.firstText {
  color: #fff;
  position: relative;
  top: 110px;
  font-size: 18px;
}
.firstPhoto {
  width: 100%;
  height: 180px;
  padding: 0 20px;
  border-radius: 10px 10px 0 0;
  background-size: 100% 100%;
}
.nextBox {
  display: flex;
  justify-content: space-between;
  padding: 0 20px;
  height: 70px;
  width: 100%;
  align-items: center;
}
.indexTip {
  background: #fff;
  width: 100px;
  height: 30px;
  border-radius: 10px;
  line-height: 30px;
  color: #03a9f4;
  text-align: center;
  border: 1px solid #03a9f4;
}
.buttonDiv {
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
}
.button {
  border: 1px solid #9e9e9e;
  color: #9e9e9e;
}
.oneItem {
  width: 100%;

  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.onePicture {
  display: flex;
  padding: 10px;
  background: #fff;
  align-items: center;
  border: 1px solid #9e9e9e7d;
  flex-direction: column;
}
</style>
